<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../js/report/css/xiaoguo.css">
<link rel="stylesheet" href="../js/report/css/animsition.min.css" />
<link rel="stylesheet" href="../js/report/css/drop-down.css" />
<link rel="stylesheet" href="../js/report/css/common.css" />
<link rel="stylesheet" href="../js/report/css/xsfx.css" />
<link rel="stylesheet" href="../js/report/jedate/skin/jedate.css" />
<link rel="stylesheet" href="../js/report/css/jquery-labelauty.css" />
<link rel="stylesheet" href="../js/report/css/alertify/alertify.min.css" />
<link rel="stylesheet" href="../js/report/css/alertify/default.min.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<script type="text/javascript" src="../js/theme/grid.js"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="../js/report/layer/layer.js"></script>
<script src="../js/report/js/alertify.min.js"></script>
<script src="../js/report/js/alertify.min.js"></script>
<script src="../js/report/js/jquery.validate.js"></script>
<script src="../js/report/js/jquery-labelauty.js"></script>
<script src="../js/report/js/jquery.cityselect.js"></script>
<script src="../js/report/jedate/jquery.jedate.min.js"></script>
<script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
<script src="../js/report/js/select-widget-min.js"></script>
<script src="../js/report/js/jquery.animsition.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="../js/report/js/macarons .js"></script>
<script src="../js/report/js/common.js"></script>
<title>报表模块</title>
</head>
<body>
	<div id="main" class="my_main2" style="width: 99.5%; height: 400px;border:2px solid #4572a7;border-radius: 5px;"></div>
	<div id="container2"></div>
	<div id="container"></div>
	<div id="container3"></div>
	<div id="main2" class="my_main2" style="width: 99.5%; height: 400px;border:2px solid #4572a7;border-radius: 5px;"></div>	
</body>
<script type="text/javascript">
	var chart;
	//饼状图图示例
	$(document).ready(function() {
		  	chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container3',          //放置图表的容器
                plotBackgroundColor: null,
                plotBorderWidth: null,
                defaultSeriesType: 'pie'   //图表类型line, spline, area, areaspline, column, bar, pie , scatter 
            },
            title: {
                text: '五年内总营业额'
            }, 
            tooltip: {
                enabled: true,
                formatter: function() {
                    return  Highcharts.numberFormat(this.y, 1) + "元";
                }
            },
            series: [{
               data: [
            	   	<c:forEach var="item" items="${aaa}"  varStatus="status"> 
            	   		<c:choose>
            	   			<c:when test="${status.index!=1}">
            	   				
            	   				['${item.key}',
            	   			<c:forEach var="it" items="${item.value}" > 
                      			${it.c},
                          	</c:forEach>],
            	   			</c:when>
            	   			<c:otherwise>
            	   				{ name: '${item.key}', y:
            	   			<c:forEach var="it" items="${item.value}" > 
                      			${it.c},
                      		</c:forEach>, sliced: true, selected: true }, //选中状态
            	   			</c:otherwise>
            	   		</c:choose>
	            	   	
            	   	</c:forEach> 
                 ]
            }]
          });  
  //柱状图图示例
  	chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'container2',          //放置图表的容器
                  plotBackgroundColor: null,
                  plotBorderWidth: null,
                  defaultSeriesType: 'column'   //图表类型line, spline, area, areaspline, column, bar, pie , scatter 
              },
              title: {
                  text: '近三年营业额报表'
              }, 
              xAxis: {//X轴数据
                  categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份', '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份', '十三月份', '十四月份'],
                  labels: {
                      rotation: -45, //字体倾斜
                      align: 'right',
                      style: { font: 'normal 13px 宋体' }
                  }
              },
              yAxis: {//Y轴显示文字
                  title: {
                      text: '单位/元'
                  }
              },
              tooltip: {
                  enabled: true,
                  formatter: function() {
                      return '<b>' + this.x + '</b><br/>' + '<b>'+this.series.name + ': </b>' + Highcharts.numberFormat(this.y, 1) + "元";
                  }
              },
              plotOptions: {
                  column: {
                      dataLabels: {
                          enabled: true
                      },
                      enableMouseTracking: true//是否显示title
                  }
              },
              series: [
            	<c:forEach var="item" items="${list4}"  > 
              	{
                  	name: '${item.key}',
                  	data: [
                  		<c:forEach var="it" items="${item.value}" > 
                  			${it.c},
                  		</c:forEach>
                  			]
              	}, 
              </c:forEach>
              ]
            });
		  	
	  //折线图示例
	    chart = new Highcharts.Chart({
	        chart: {
	            renderTo: 'container',          //放置图表的容器
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            defaultSeriesType: 'line'   
	        },
	        title: {
	            text: '上三月营业额报表'
	        },
	        subtitle: {
	            text: ''//副标题
	        },
	        xAxis: {//X轴数据
	            categories: ['1日','2日','3日','4日','5日','6日','7日','8日','9日','10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日','31日'],
	            labels: {
	                rotation: -45, //字体倾斜
	                align: 'right',
	                style: { font: 'normal 13px 宋体' }
	            }
	        },
	        yAxis: {//Y轴显示文字
	            title: {
	                text: '单位/元'
	            }
	        },
	        tooltip: {
	            enabled: true,
	            formatter: function() {
	                return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1);
	            }
	        },
	        plotOptions: {
	            line: {
	                dataLabels: {
	                    enabled: true
	                },
	                enableMouseTracking: true//是否显示title
	            }
	        },
	        series: [
	        	<c:forEach var="item" items="${list3}">
	        		{
		            name: '${item.key}销量按日统计',
		            data: [
		            	<c:forEach var="it" items="${item.value}">
		            		${it.c},
		            	</c:forEach>
		            	]
		        	},
	        	</c:forEach>
	        ]
	    });
	});
	
</script>

<script>
	$(document).ready(function() {

		//销量信息
		var sf_data = [
			<c:forEach var="list" items="${list2.report}">
				{name: '${list.goodsName}',value: ${list.c}},
			</c:forEach> 
		];
	
		//插件初始化
		$(":checkbox").labelauty({
			checked_label: "",
			unchecked_label: "",
		});
		$(":radio").labelauty({
			checked_label: "",
			unchecked_label: "",
		});
		
			  //初始化切换
	  $(".animsition").animsition({
	  
	    inClass               :   'fade-in-right',
	    outClass              :   'fade-out',
	    inDuration            :    1500,
	    outDuration           :    800,
	    linkElement           :   '.animsition-link',
	    // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
	    loading               :    true,
	    loadingParentElement  :   'body', //animsition wrapper element
	    loadingClass          :   'animsition-loading',
	    unSupportCss          : [ 'animation-duration',
	                              '-webkit-animation-duration',
	                              '-o-animation-duration'
	                            ],
	    //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
	    //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
	    
	    overlay               :   false,
	    
	    overlayClass          :   'animsition-overlay-slide',
	    overlayParentElement  :   'body'
	  });
	  
	    // 路径配置
	       require.config({
	           paths: {
	               echarts: 'http://echarts.baidu.com/build/dist'
	           }
	       });
	       
	       // 使用
	       require(
	           [
	               'echarts',
	               'echarts/chart/bar',
	               'echarts/chart/line',
	               'echarts/chart/pie',
	               'echarts/chart/map',// 使用柱状图就加载bar模块，按需加载
	           ],
	           function (ec) {
	               // 基于准备好的dom，初始化echarts图表
	               var myChart = ec.init(document.getElementById('main'),'macarons');
	               var ecConfig = require('echarts/config');
	               
	
				var option = {
					backgroundColor:'white',
					title : {
						text : '菜品上月销量分析',
						textStyle : {
							fontSize : 17
						},
						x : 'center',
						y : 20
					},
				    tooltip : {
				        trigger: 'item',
				        formatter : '{a}' + '<br/>' + '{b}: {c}; {d}%'
				        
				    },
					toolbox: {
						show : true,
						y : 25,
						x : 930,
						feature : {
							dataView : {show: true, readOnly: false},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
				    calculable : false,
				    series : [
				        {
				            name:'菜品上月销量分析',
				            type:'pie',
				            center:['50%','55%'],
				            radius : ['40%', '55%'],
							selectedMode: 'single',
					        itemStyle: {  
				                normal: {  
				                 label:{  
				                        show: true,  
				                        formatter: function(param) {
						                     return param.name + ' : ' + Math.round(param.percent) + '%';
						                },
						                textStyle : {
		                                    fontWeight : 'bolder'
		                                }
				                	}   
				              	},
				              	 emphasis : {
				                    label : {
				                        show : true,
				                        position : 'center',
				                        textStyle : {
				                            fontSize : '30',
				                            fontWeight : 'bold'
				                        }
				                    }
				                }
					        },
				            data:sf_data
				            
				        }
				    ]
				};
	
	               // 为echarts对象加载数据 
	               myChart.setOption(option);
	
				$("#my_Form").validate({
					submitHandler: function() {
						option.series[0].data = [{name: '北京',value: Math.round(Math.random()*1000)},
												{name: '天津',value: Math.round(Math.random()*1000)},
												{name: '上海',value: Math.round(Math.random()*1000)},
												{name: '重庆',value: Math.round(Math.random()*1000)}];
						myChart.clear();
						myChart.setOption(option,true);
					}
				});
	
	               $('#khly').on('change',function(){
					$('label.error').hide();
					$('#hy_slect').val('not');
					$('#sp_id').val('');
					$('#hy_jf').find('input').val('');
	               	var  val = $(this).val();
					switch (val){
						case  'hy':
								$('.my_sxtj').hide();
								$('#hy_slect').show();
							break;
						case  'sp':
							$('.my_sxtj').hide();
							$('#sp_id').show();
							break;
						case  'jf':
							$('.my_sxtj').hide();
							$('#hy_jf').show();
							break;
					}
	               });
	              
	            }
	        );
	});
</script>
<script>
	$(document).ready(function() {

		//销量信息
		var sf_data = [
			<c:forEach var="list" items="${list.report}">
				{name: '${list.goodsName}',value: ${list.c}},
			</c:forEach>
		];
	
		//插件初始化
		$(":checkbox").labelauty({
			checked_label: "",
			unchecked_label: "",
		});
		$(":radio").labelauty({
			checked_label: "",
			unchecked_label: "",
		});
		
			  //初始化切换
	  $(".animsition").animsition({
	  
	    inClass               :   'fade-in-right',
	    outClass              :   'fade-out',
	    inDuration            :    1500,
	    outDuration           :    800,
	    linkElement           :   '.animsition-link',
	    // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
	    loading               :    true,
	    loadingParentElement  :   'body', //animsition wrapper element
	    loadingClass          :   'animsition-loading',
	    unSupportCss          : [ 'animation-duration',
	                              '-webkit-animation-duration',
	                              '-o-animation-duration'
	                            ],
	    //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
	    //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
	    
	    overlay               :   false,
	    
	    overlayClass          :   'animsition-overlay-slide',
	    overlayParentElement  :   'body'
	  });
	  
	    // 路径配置
	       require.config({
	           paths: {
	               echarts: 'http://echarts.baidu.com/build/dist'
	           }
	       });
	       
	       // 使用
	       require(
	           [
	               'echarts',
	               'echarts/chart/bar',
	               'echarts/chart/line',
	               'echarts/chart/pie',
	               'echarts/chart/map',// 使用柱状图就加载bar模块，按需加载
	           ],
	           function (ec) {
	               // 基于准备好的dom，初始化echarts图表
	               var myChart = ec.init(document.getElementById('main2'),'macarons');
	               var ecConfig = require('echarts/config');
	               
	
				var option = {
					backgroundColor:'white',
					title : {
						text : '菜品上周销量分析',
						textStyle : {
							fontSize : 17
						},
						x : 'center',
						y : 20
					},
				    tooltip : {
				        trigger: 'item',
				        formatter : '{a}' + '<br/>' + '{b}: {c}; {d}%'
				        
				    },
					toolbox: {
						show : true,
						y : 25,
						x : 930,
						feature : {
							dataView : {show: true, readOnly: false},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
				    calculable : false,
				    series : [
				        {
				            name:'菜品上周销量分析',
				            type:'pie',
				            center:['50%','55%'],
				            radius : ['40%', '55%'],
							selectedMode: 'single',
					        itemStyle: {  
				                normal: {  
				                 label:{  
				                        show: true,  
				                        formatter: function(param) {
						                     return param.name + ' : ' + Math.round(param.percent) + '%';
						                },
						                textStyle : {
		                                    fontWeight : 'bolder'
		                                }
				                	}   
				              	},
				              	 emphasis : {
				                    label : {
				                        show : true,
				                        position : 'center',
				                        textStyle : {
				                            fontSize : '30',
				                            fontWeight : 'bold'
				                        }
				                    }
				                }
					        },
				            data:sf_data
				            
				        }
				    ]
				};
	
	               // 为echarts对象加载数据 
	               myChart.setOption(option);
	
				$("#my_Form").validate({
					submitHandler: function() {
						option.series[0].data = [{name: '北京',value: Math.round(Math.random()*1000)},
												{name: '天津',value: Math.round(Math.random()*1000)},
												{name: '上海',value: Math.round(Math.random()*1000)},
												{name: '重庆',value: Math.round(Math.random()*1000)}];
						myChart.clear();
						myChart.setOption(option,true);
					}
				});
	
	               $('#khly').on('change',function(){
					$('label.error').hide();
					$('#hy_slect').val('not');
					$('#sp_id').val('');
					$('#hy_jf').find('input').val('');
	               	var  val = $(this).val();
					switch (val){
						case  'hy':
								$('.my_sxtj').hide();
								$('#hy_slect').show();
							break;
						case  'sp':
							$('.my_sxtj').hide();
							$('#sp_id').show();
							break;
						case  'jf':
							$('.my_sxtj').hide();
							$('#hy_jf').show();
							break;
					}
	               });
	              
	            }
	        );
	});
</script>
</html>